<template>
	<div class="wy-main supply-CharteredCar">
		<a-form :form="form" @submit="handleSubmit">
			<div class="route">
				<p class="route_text">同城叫车业务是物流云推出的快速包车服务，根据客户需要的车型，快速推送到附近车辆司机的手中，让司机与您联系，为您快速调到更多合适的车辆！</p>
				<div class="route_choice">
					<p><b>车辆需求</b></p>
					<a-form-item label="选择城市" :label-col="{ span: 2 }" :wrapper-col="{ span: 20 }">
						<a-select style="width: 20%;" placeholder="请选择城市" v-decorator="[ 'city' , {rules: [{ required: true, message: '请选择城市！' }]}]" @change="getMap">
							<a-select-option value="1">
								北京
							</a-select-option>
							<a-select-option value="2">
								上海
							</a-select-option>
							<a-select-option value="3">
								广州
							</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item label="选择车型" class="vehicle-type" :label-col="{ span: 2 }" :wrapper-col="{ span: 22 }">
						
						<!--<div class="vehicle" :class="item.class" v-for="(item,index) in vehicle_list" @click="getvehicle(index)">
							<a-icon type="check" class="veh-ico" style="background: #15837A ; color: #FFF" />
							<img class="front-img" :src="item.front_img"/>
							<img class="after-img" :src="item.after_img"/>
							<p>{{item.name}}</p>
						</div>-->
						<a-popover placement="bottom" v-for="(item,index) in vehicleType" :key='index'>
						    <template slot="content">
						    	{{item.typeRemark}}
						    </template>
							<div class="vehicle" :class="item.class"  @click="getvehicle(index)">
								<a-icon type="check" class="veh-ico" style="background: #15837A ; color: #FFF" />
								<!--<img class="front-img" :src="item.front_img"/>
								<img class="after-img" :src="item.after_img"/>-->
								<p>{{item.dictValue}}</p>
							</div>
						</a-popover>
					</a-form-item>
					<a-form-item label="用车时间" :label-col="{ span: 2 }" :wrapper-col="{ span: 20 }">
						<a-radio-group v-decorator="['useCarTime',{rules: [{ required: true, message: '请选择用车时间！' }]}]">
					        <a-radio value="1">
					          	立即用车
					        </a-radio>
					        <a-radio value="2">
					          	预约时间
					        </a-radio>
					    </a-radio-group>
						<a-date-picker  v-decorator="['useCarDate']" placeholder='请选择预约时间' show-time format="YYYY-MM-DD HH:mm:ss" />
					</a-form-item>
				</div>
				<a-divider style="width: 95%;margin: 0;margin-left: 20px; " />
				<div class="route_choice">
					<p><b>货物信息</b></p>
						<a-form-item label="货物图片" :label-col="{ span: 2 }" :wrapper-col="{ span: 16 }" class="upzjimg">
							<a-upload v-decorator="['upload', {rules: [{ required: true, message: '请选择货物图片!' }]}]" name="file" listType="picture-card" class="avatar-uploader up_img" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Positive_Change">
								<div class="img_zz" v-if="vehIng_one">
									<div class="img_zz_text">
										<a-icon style="font-size: 24px;" :type="loading ? 'loading' : 'plus'" />
									</div>
									<div class="img_zz_d"></div>
								</div>
								<img v-if="vehIng_one" :src="vehIng_one" alt="avatar" />
								<div class="up_img_d" v-if="!vehIng_one">
									<a-icon style="font-size: 24px;" :type="loading ? 'loading' : 'plus'" />
								</div>
							</a-upload>
							<a-upload v-decorator="['upload1']" name="file" listType="picture-card" class="avatar-uploader up_img" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Positive_Change">
								<div class="img_zz" v-if="vehIng_two">
									<div class="img_zz_text">
										<a-icon style="font-size: 24px;" :type="loading ? 'loading' : 'plus'" />
									</div>
									<div class="img_zz_d"></div>
								</div>
								<img v-if="vehIng_two" :src="vehIng_two" alt="avatar" />
								<div class="up_img_d" v-if="!vehIng_two">
									<a-icon style="font-size: 24px;" :type="loading ? 'loading' : 'plus'" />
								</div>
							</a-upload>
							<a-upload v-decorator="['upload2']" name="file" listType="picture-card" class="avatar-uploader up_img" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Positive_Change">
								<div class="img_zz" v-if="vehIng_three">
									<div class="img_zz_text">
										<a-icon style="font-size: 24px;" :type="loading ? 'loading' : 'plus'" />
									</div>
									<div class="img_zz_d"></div>
								</div>
								<img v-if="vehIng_three" :src="vehIng_three" alt="avatar" />
								<div class="up_img_d" v-if="!vehIng_three">
									<a-icon style="font-size: 24px;" :type="loading ? 'loading' : 'plus'" />
								</div>
							</a-upload>
							<a-upload v-decorator="['upload3']" name="file" listType="picture-card" class="avatar-uploader up_img" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Positive_Change">
								<div class="img_zz" v-if="vehIng_four">
									<div class="img_zz_text">
										<a-icon style="font-size: 24px;" :type="loading ? 'loading' : 'plus'" />
									</div>
									<div class="img_zz_d"></div>
								</div>
								<img v-if="vehIng_four" :src="vehIng_four" alt="avatar" />
								<div class="up_img_d" v-if="!vehIng_four">
									<a-icon style="font-size: 24px;" :type="loading ? 'loading' : 'plus'" />
								</div>
							</a-upload>
						</a-form-item>
						<a-form-item label="货物名称" :label-col="{lg: { span: 24}, xl: { span: 2,}}" :wrapper-col="{lg: { span: 24}, xl: { span: 21}}">
							<a-input style="width: 10%;" v-decorator="[ 'cargoName', {rules: [{ required: true, message: '货物名称不能为空!' }]}]" />
							<a-select style="width: 10%;margin-left: 10px;"  placeholder="货物类型" v-decorator="[ 'cargoCategoryValue']">
								<a-select-option :value="item.dictKey" v-for="(item,index) in goodsType" key='index'>
									{{item.dictValue}}
								</a-select-option>
							</a-select>
							<span style="margin-left: 10px;">货物类型：</span>
							<a-select  v-decorator="[ 'cargoType', {initialValue: '1'}]"  style="width: 10%">
								<a-select-option value="1"> 重货 </a-select-option>
								<a-select-option value="2"> 轻货</a-select-option>
							</a-select>
							<span style="margin-left: 10px;" >预估重量：</span>
							<a-input style="width: 5%;" v-decorator="['weight']"/>
							<a-select  v-decorator="[ 'weightUnit', {initialValue: '公斤'}]" style="width: 80px;margin-left: 10px;">
								<a-select-option value="公斤"> 公斤 </a-select-option>
								<a-select-option value="吨"> 吨 </a-select-option>
							</a-select>
							<span style="margin-left: 10px;">预估体积：</span>
							<a-input style="width: 5%;" v-decorator="['volume']" />
							<span style="margin-left: 10px;">立方米</span>
							<span style="margin-left: 10px;">数量：</span>
							<a-input style="width: 5%;" v-decorator="['totalNums']"/> 
							<span style="margin-left: 10px;">件</span>
						</a-form-item>
				</div>
				<a-divider style="width: 95%;margin: 0;margin-left: 20px; " />
				<div class="route_choice">
					<p><b>需求信息</b></p>
					<a-form-item label="运输需求" :label-col="{ span: 2 }" :wrapper-col="{ span: 16 }">
						<a-checkbox-group v-decorator="['requirement',  {rules: [{ required: true, message: '请选择运输需求!' }]}]" style="width: 100%;">
							<a-checkbox :value="item.dictKey" v-for="(item,index) in demandType" :key="index">
									{{item.dictValue}}
							</a-checkbox>
						</a-checkbox-group>
					</a-form-item>
					<a-form-item label="备注" :label-col="{ span: 2 }" :wrapper-col="{ span: 16 }">
						<div class="car-label">
							 <!--<span :class="i.class" v-for="(i,index) in Label_list" @click="Label_chenge(index)">
								{{i.name}}
							</span>-->
							<span :class="i.class" v-for="(i,index) in labelType" @click="Label_chenge(index)">
								{{i.dictValue}}
							</span>
						</div>
						<a-textarea v-model="remark"  :rows="3" />
					</a-form-item>
				</div>
				<a-divider style="width: 95%;margin: 0;margin-left: 20px; " />
				<div class="route_choice">
					<p><b>联系方式</b></p>
					<a-row>
						<a-col :span="8">
							<a-form-item label="发货地址" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
								<a-input readOnly @click="departureShowMap" v-decorator="[ 'fromCity', {rules: [{ required: true, message: '请选择发货地址!' }]}]"
								 placeholder='请选择发货地址' ref="userNameInput">
									<a-icon type="environment" slot="suffix" style="color: #15837A;" />
								</a-input>
							</a-form-item>
						</a-col>
						<a-col :span="6">
							<a-form-item label="发货人" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
								<a-input  v-decorator="['sendPerson', {rules: [{ required: true, message: '请输入发货人姓名！' }]}]" placeholder="请输入发货人姓名" />
							</a-form-item>
						</a-col>
						<a-col :span="10">
							<a-form-item label="发货人手机号" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
								<a-input  v-decorator="['sendMobile	', {rules: [{ required: true, message: '请输入发货人手机号！' },{ validator: checkMobile }]}]" placeholder="请输入发货人手机号" />
							</a-form-item>
						</a-col>
					</a-row>
					<a-row>
						<a-col :span="8">
							<a-form-item label="收货地址" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
								<a-input readOnly @click="destinationShowMap" class="wy-input" v-decorator="[ 'toCity', {rules: [{ required: true, message: '请选择收货地址!' }]}]"
								 placeholder='请选择收货地址'>
									<a-icon type="environment" slot="suffix" style="color: #FF2F47;" />
								</a-input>
							</a-form-item>
						</a-col>
						<a-col :span="6">
							<a-form-item label="收货人" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
								<a-input  v-decorator="['receivePerson',{rules: [{ validator: checkMobile }]}]" placeholder="请输入收货人姓名" />
							</a-form-item>
						</a-col>
						<a-col :span="10">
							<a-form-item label="收货人手机号" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
								<a-input  v-decorator="['receiveMobile']" placeholder="请输入收货人手机号" />
							</a-form-item>
						</a-col>
					</a-row>
				</div>
				<a-divider style="width: 95%;margin: 0;margin-left: 20px; " />
				<div class="ant-row ant-form-item">
					<div class="ant-col-1 ant-form-item-label"></div>
					<div class="ant-col-22 ant-form-item-control-wrapper">
						<div class="ant-form-item-control">
							<span class="ant-form-item-children">
								<a-checkbox v-model='agreement' >
									我已阅读并接受<a href="JavaScript:;">《云南省国际物流云平台务务协议》</a><a href="JavaScript:;">《网络用户信息保密协议》</a>
								</a-checkbox>
							</span>
						</div>
					</div>
				</div>
				<div class="ant-row ant-form-item">
					<div class="ant-col-1 ant-form-item-label"></div>
					<div class="ant-col-10 ant-form-item-control-wrapper">
						<div class="ant-form-item-control">
							<span class="ant-form-item-children">
								<a-button type="primary"  :disabled="!agreement" html-type="submit" style="width: 280px;height:50px;margin-top: -10px;">
									立即发布
								</a-button>
							</span>
						</div>
					</div>
				</div>
			</div>
		</a-form>
		<!--地图Svg显示位置-->
		<map-svg ref="mapSvgDialog" @change="mapSvgCall" @distance="distanceCall"></map-svg>
	</div>
</template>
<script>
	import MapSvg from '@/components/dialog/MapSvg'
	import { environment } from '@/environments/environment'
	import { mapState } from 'vuex'
	import {checkTel, checkTelNum, checkEmail} from 'utils/formValidate'
	export default {
		data() {
			return {
				agreement:false,
				goodsType:[],
				vehicleType:[],
				demandType:[],
				labelType:[],
				
				vehIng_one:'',
				vehIng_two:'',
				vehIng_three:'',
				vehIng_four:'',
				
				
				vehicle_list:[{
					name:'面包车',
					front_img:require('../../../../../static/img/vehicle/Van.png'),
					after_img:require('../../../../../static/img/vehicle/pick-Van.png'),
					class: ''
					
				},{
					name:'金杯车/低顶',
					front_img:require('../../../../../static/img/vehicle/Lowtop.png'),
					after_img:require('../../../../../static/img/vehicle/pick-Lowtop.png'),
					class: ''
					
				},{
					name:'金杯车/高顶',
					front_img:require('../../../../../static/img/vehicle/Hightop.png'),
					after_img:require('../../../../../static/img/vehicle/pick-Hightop.png'),
					class: ''
					
				},{
					name:'4.2米中巴',
					front_img:require('../../../../../static/img/vehicle/Bus.png'),
					after_img:require('../../../../../static/img/vehicle/pick-Bus.png'),
					class: ''
					
				},{
					name:'4.2米箱车',
					front_img:require('../../../../../static/img/vehicle/Truck.png'),
					after_img:require('../../../../../static/img/vehicle/pick-Truck.png'),
					class: ''
					
				},{
					name:'4.2米高栏车',
					front_img:require('../../../../../static/img/vehicle/High.png'),
					after_img:require('../../../../../static/img/vehicle/pick-High.png'),
					class: ''
					
				},{
					name:'4.2米低栏车',
					front_img:require('../../../../../static/img/vehicle/low.png'),
					after_img:require('../../../../../static/img/vehicle/pick-low.png'),
					class: ''
					
				}],
				
				
				remark:'',
				fileList: [],
				previewImage:'',
				loading:false,
				previewVisible:false,
				uploadUrl: environment.FileUploadUrl+'/fileupload/upload',// 图片上传地址
				
				// 地图存起止数据
				departureData: {},
				destinationData: {},
				distance: '',
				form: this.$form.createForm(this),
				
				
				
				Label_list: [{
						name: '马上可以装货',
						class: ''
					},
					{
						name: '天天发车',
						class: ''
					},
					{
						name: '三不超,全现金',
						class: ''
					},
					{
						name: '求资源',
						class: ''
					},
				]
			}
		},
		computed: {},
		beforeCreate() {},
		created() {
			console.log(this.detail,'asjd6666')
			// 获取编辑的信息
			if(this.detail){
				this.getinfo()
			}
			this.getType(3)
			this.getType(2)
			this.getType(8)
			this.getType(9)
		},
		components: {
			// Footer
			MapSvg
		},
		watch: {},

		mounted: function() {

		},
		props: {
			detail:{}
		},
		methods: {
			// 校验手机号
			checkMobile:checkTel,
			// 获取编辑的信息
			getinfo(){
				this.$get('/info/infoCargomaster/getCargosmasterById/'+this.detail.cargoId).then((r) => {
					console.log('货物信息：',r)
					let data = r.data.data
					this.form.setFieldsValue({
						fromCity:data.fromCity,
						toCity:data.toCity,
						fromStreet:data.fromStreet,
						toStreet:data.toStreet,
						sendPerson:data.sendPerson,
						receivePerson:data.receivePerson,
						sendMobile:data.sendMobile,
						receiveMobile:data.receiveMobile,
						cargoName:data.cargos[0].cargoName,
						cargoCategoryKey:data.cargos[0].cargoCategoryKey,
						cargoType:data.cargos[0].cargoType+'',
						totalNums:data.cargos[0].totalNums,
						volume:data.cargos[0].volume,
						weight:data.cargos[0].weight,
						volume :data.cargos[0].volume,
						cargoCategoryValue :data.cargos[0].cargoCategoryValue+'',
						remark:data.remark,
						expectPrice:data.expectPrice,
						carLengthKey:data.carLengthKey,
						selectCarKey:data.selectCarKey,
						longCargo:data.longCargo,
						validDay:data.validDay,
					});
					console.log(this.huowuArray)
//					for(let i in data.cargos){
//						this.huowuArray[i].fileList = data.cargos[i].cargoPics.split(',')
//					}
					console.log(this.huowuArray,89899999999999999999999999)
					
				})
				.catch((e) => {
					console.log(e)
				})
			},
			// 字典查询
			getType(type){
				let params = {}
				params.dictType = type
				this.$get('/info/commonDict', params).then((r) => {
					this.loading = false
					console.log('车辆类型22：',r)
					if(type == 2){
						this.goodsType = r.data.data.rows
					}
					if(type == 3){
						this.vehicleType = r.data.data.rows
						for(var i in this.vehicleType){
							this.vehicleType[i].class = ''
						}
					}
					if(type == 8){
						this.demandType = r.data.data.rows
					}
					if(type == 9){
						this.labelType = r.data.data.rows
					}
				})
			},
			// 选择车型
//			getvehicle(index){
//				for(var i in this.vehicle_list){
//					if(i == index){
//						this.vehicle_list[i].class = 'click-vehicle'
//					}else{
//						this.vehicle_list[i].class = ''
//					}
//				}
//			},
			getvehicle(index){
				for(var i in this.vehicleType){
					if(i == index){
//						this.$set(this.vehicleType[i],"class",'click-vehicle');
						this.vehicleType[i].class = 'click-vehicle'
//						this.vehicleType[i].dictValue = 'click-vehicle'
					}else{
						this.vehicleType[i].class = ''
//						this.$set(this.vehicleType[i],"class",'');
						
//						this.vehicleType[i].dictValue = '666'
					}
				}
			},
			// 上传图片前事件处理
			beforeUpload(file) {
				console.log(file.type)
				const isJPG = file.type === 'image/jpeg' || 'image/png'
				if(!isJPG) {
					this.$message.error('You can only upload JPG file!')
				}
				const isLt2M = file.size / 1024 / 1024 < 2
				if(!isLt2M) {
					this.$message.error('Image must smaller than 2MB!')
				}
				return isJPG && isLt2M
			},
			add(){
				if(this.form.getFieldValue('upload')){
					this.getBase64(this.form.getFieldValue('upload').file.originFileObj, (imageUrl) => {
			          this.vehIng_one = imageUrl
			          this.loading = false
			        })
				}
				if(this.form.getFieldValue('upload1')){
					this.getBase64(this.form.getFieldValue('upload1').file.originFileObj, (imageUrl) => {
			          this.vehIng_two = imageUrl
			          this.loading = false
			        })
				}
				if(this.form.getFieldValue('upload2')){
					this.getBase64(this.form.getFieldValue('upload2').file.originFileObj, (imageUrl) => {
			          this.vehIng_three = imageUrl
			          this.loading = false
			        })
				}
				if(this.form.getFieldValue('upload3')){
					this.getBase64(this.form.getFieldValue('upload3').file.originFileObj, (imageUrl) => {
			          this.vehIng_four = imageUrl
			          this.loading = false
			        })
				}
			},
			getBase64 (img, callback) {
			  const reader = new FileReader()
			  reader.addEventListener('load', () => callback(reader.result))
			  reader.readAsDataURL(img)
			},
			// 上传货物图片
			Positive_Change(info) {
//				console.log(info, 9889)
				if(info.file.status === 'uploading') {
					this.loading = true
					return
				}
				if(info.file.status === 'done') {
//					this.Positive_img = info.file.response.data.certifJpgFile
//					this.certificatesjpg = info.file.response.data.certificatesjpg
//					this.certificatesPath = info.file.response.data.certificatesPath
					this.loading = false
					this.add()
				}
			},
			// 选择标签
			Label_chenge(index) {
				for(var i in this.labelType) {
					if(i == index) {
						if(!this.labelType[i].class) {
							this.labelType[i].class = 'active'
							this.remark += this.labelType[i].dictValue+'，'
						} else {
							this.labelType[i].class = ''
							this.remark = this.remark.split(this.labelType[i].dictValue+'，').join("");
						}
					}
				}
			},
			// 省市地图回调
			mapSvgCall(d) {
				if (d.name === 'departure') {
					this.form.setFieldsValue({
						fromCity: d.provCityArea
					});
					this.departureData = Object.assign({}, d);
					console.log(this.departureData, 898888)
				}
				if (d.name === 'destination') {
					this.form.setFieldsValue({
						toCity: d.provCityArea
					});
					this.destinationData = Object.assign({}, d);
				}
				if (d.name === 'departureStreet') {
					this.form.setFieldsValue({
						departureStreet: d.address
					});
				}
				if (d.name === 'destinationStreet') {
					this.form.setFieldsValue({
						destinationStreet: d.address
					});
				}
				//				this[d.name] = d.address;
				this.getDistanceCount();
			},
			// 选择出发地
			departureShowMap() {
				this.$refs.mapSvgDialog.mapSvgVisible('departure', 2, '', '', '');
			},
			// 选择到达地
			destinationShowMap() {
				this.$refs.mapSvgDialog.mapSvgVisible('destination', 2, '', '', '');
			},
			// 起运地到目的地的距离
			getDistanceCount() {
				if (this.departureData.point && this.destinationData.point) {
					this.$refs.mapSvgDialog.distanceCount(this.departureData.point, this.destinationData.point);
				}
			},
			// 调用距离返回
			distanceCall(num) {
				console.log(num)
				this.distance = num
				//				 this.form.setFieldsValue({ juliNum: num });
			},
			// 下拉选择框事件
			getMap() {

			},
			// 提交保存
			handleSubmit(e) {
				if(this.loading) return;
				e.preventDefault();
				this.form.validateFieldsAndScroll((err, values) => {
					if(!err) {
						// this.loading = true
						let cargopics = ''
//						for(let i in this.fileList){
//							cargopics += this.fileList[i].response.data.certifJpgFile+','							
//						}
						if(values.upload){
							cargopics += values.upload.file.response.data.certifJpgFile+','							
						}
						if(values.upload1){
							cargopics += values.upload.file.response.data.certifJpgFile+','							
						}
						if(values.upload2){
							cargopics += values.upload.file.response.data.certifJpgFile+','							
						}
						if(values.upload3){
							cargopics += values.upload.file.response.data.certifJpgFile+','							
						}
						if(values.requirement){
							for(var i in values.requirement){
								values.requirement += values.requirement[i]+','
							}
						}
						console.log(cargopics,989898)
						values.cargos = [{
							"cargoPics":cargopics,
							"cargoName":this.form.getFieldValue('cargoName'),
							"cargoCategoryValue":this.form.getFieldValue('cargoCategoryValue'),
							"totalNums":this.form.getFieldValue('totalNums'),
							"weight":this.form.getFieldValue('weight'),
							"weightUnit":this.form.getFieldValue('weightUnit'),
							"cargoType":this.form.getFieldValue('cargoType'),
							"volume":this.form.getFieldValue('volume'),
						}]
						if(values.useCarDate){
							values.useCarDate  = values.useCarDate .format('YYYY-MM-DD HH:mm:ss')
						}
						values.type  = 3
						values.remark = this.remark
//						values.linkmen = []
//						if(this.addDeliver == true){
//							values.linkmen.push({
//								  "sendPerson": this.form.getFieldValue('sendPerson'),
//								  "sendPersonMobile": this.form.getFieldValue('sendMobile'),
//								  "type": 0,
//								  "userId": this.user.userId
//							})
//						}
//						if(this.addReceiving == true){
//							values.linkmen.push({
//								  "receivePersion": this.form.getFieldValue('receivePerson'),
//								  "receivePersonMobile": this.form.getFieldValue('receiveMobile'),
//								  "type": 1,
//								  "userId": this.user.userId
//							})
//						}
						console.log('Received values of form: ', values);
						this.$post('/info/infoCargomaster', values,true).then((r) => {
							console.log(r,8989)
							if(r.status == 200){
								this.$notification.success({
								  message: r.data.message,
								});
								this.form.resetFields();
							}
							this.loading = false;
						}).catch((e) => {
							console.log(e)
							this.loading = false;
						})
					}
				});
			},
		},
		computed: {
			...mapState({
				multipage: state => state.setting.multipage,
				user: state => state.account.user,
			}),
		},
	}
</script>

<style lang="less">
	.supply-CharteredCar {
		.route {
			.route_text {
				font-size: 12px;
				padding: 0px 30px;
				margin: 0;
			}
			.route_choice {
				width: 100%;
				padding: 10px 30px;
				margin-top: 10px;
				.vehicle-type{
					overflow: hidden;
					.vehicle{
						position: relative;
						text-align: center;
						width: 118px;
						height: 80px;
						/*border: 1px solid #15837A;*/
						float: left;
						margin-right: 10px;
						margin-bottom: 10px;
						padding-top:5px;
						p{
							line-height: 30px;
						}
						.front-img{
							display: initial;
						}
						.after-img{
							display: none;
						}
						.veh-ico{
							display: none;
						}
					}
					.vehicle:hover{
						border: 2px solid #15837A;
						color: #15837A;
						cursor: pointer;
						.front-img{
							display: none;
						}
						.after-img{
							display: initial;
						}
					}
					.click-vehicle{
						border: 2px solid #15837A;
						color: #15837A;
						.front-img{
							display: none;
						}
						.after-img{
							display: initial;
						}
						.veh-ico{
							display: initial;
							width: 12px;
						    bottom: 0;
						    right: 0;
						    position: absolute;
						    padding: 1px;
						    font-size: 10px;
						    height: 12px;
						    background: rgb(21, 131, 122);
						    color: rgb(255, 255, 255);
						}
					}
				}
				.car-label {
					margin-top: 10px;
					span {
						border: 1px solid #15837A;
						width: 100px;
						height: 40px;
						border-radius: 2px;
						text-align: center;
						line-height: 36px;
						font-size: 14px;
						display: inline-block;
						margin-right: 30px;
						margin-bottom: 20px;
					}
					.active {
						background: #15837A;
						color: #fff;
					}
					.span:first-child {
						margin-left: 0;
					}
					span,
					span:hover {
						cursor: pointer;
					}
				}
				.upzjimg {
					.ant-upload {
						padding: 0;
					}
					.ant-upload-list-picture-card .ant-upload-list-item {
						width: 80px;
						height: 80px;
					}
					.ant-upload.ant-upload-select-picture-card {
						border: 1px solid #DDDDDD;
					}
					.up_img {
						float: left;
						position: relative;
						.ant-upload.ant-upload-select-picture-card {
							width: 80px;
							height: 80px;
						}
						img {
							width: 80px;
							height: 80px;
						}
						.up_img_d {
							color: #DDDDDD;
							width: 80px;
							height: 80px;
							padding-top: 28px;
						}
						.img_zz {
							width: 80px;
							height: 80px;
							position: absolute;
							color: #fff;
							.img_zz_text {
								position: absolute;
								z-index: 10;
								padding-top: 28px;
								padding-left: 28px;
							}
							.img_zz_d {
								position: absolute;
								width: 80px;
								height: 80px;
								background: #000;
								opacity: 0.6;
							}
						}
					}
				}
			}
			.route_but {
				width: 100%;
				border: 1px solid #eee;
				padding: 10px 30px;
				margin-top: 10px;
				text-align: center;
			}
		}
	}
</style>